<!-- 个人中心 -->
<template>
	<view class="personal-wrap">
		<view class="user-head u-flex u-row-between">
			<view class="u-flex">
				<!-- 个人信息 -->
				<view class="info-box">
					<view class="u-flex"
						@tap="$Router.push('/pages/user/info')">
						<view class="head-img-wrap">
							<image class="head-img"
								:src="userInfo.avatar || $IMG_URL + '/imgs/base_avatar.png'"
								mode="aspectFill"></image>
						</view>
						<view>
							<view class="u-flex">
								<view class="user-name u-ellipsis-1">
									{{ userInfo.nickname || '请登录~' }}
								</view>
								<view v-if="userInfo.nickname && agentInfo.agent_level"
									class="level-tag">
									{{agentInfo.agent_level.name}}
								</view>
							</view>
							<view v-if="agentInfo && agentInfo.apply_info"
								class="u-m-t-10">
								{{agentInfo.apply_info.school}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 累计总收益 -->
		<view class="total-income u-flex u-row-between"
			@click="goAgent('/pages/app/commission/commission-log')">
			<view class="income">
				<view>累计总收益</view>
				<view class="money"> ¥ {{agentInfo.total_income || '0.00'}}
				</view>
				<view>
					<text class="u-iconfont uicon-arrow-right u-m-l-10"
						style="color: #b66b26;font-size: 24rpx;"></text>
				</view>
			</view>
			<view class="btn"
				@click.stop="goAgent('/pages/user/wallet/withdraw')">立即提现</view>
		</view>
		<!-- 收益 -->
		<view class="income-section">
			<view class="list">
				<view class="item">
					<view class="num"> ¥ {{agentInfo.direct_money || '0.00'}}
					</view>
					<view class="label">个人收益</view>
				</view>
				<view class="item">
					<view class="num"> ¥ {{agentInfo.inter_money || '0.00'}}
					</view>
					<view class="label">团队收益</view>
				</view>
				<view class="item"
				@click.stop="goAgent('/pages/user/wallet/index')">
					<view class="num"
						style="color: red;">¥ {{userInfo.money || '0.00'}}</view>
					<view class="label">可提现</view>
				</view>
			</view>
			<view class="tip"> 统计您的个人提成及团队给您创造的级差收入总和 </view>
		</view>
		<!-- 组建团队 -->
		<view class="section"
			@click="goAgent('share')">
			<view class="tit">组建团队</view>
			<view class="share">
				<view>扩大团队赚更多</view>
				<image src="/static/images/team.png"
					class="icon"></image>
			</view>
		</view>
		<!-- 工具 -->
		<view class="section"
			style="margin-bottom: 30rpx;">
			<view class="tit">其他功能</view>
			<view class="menu">
				<view v-for="(item,index) in menuList"
					:key="index"
					class="item"
					@click="goAgent(item.url,item.agent)">
					<view>
						<image :src="item.icon"
							class="icon"></image>
					</view>
					<view class="name">{{item.text}}</view>
				</view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view class="tabbar-hack"
			style="height: 120rpx; width:100%;"></view>
		<!-- #endif -->
		<!-- 	分享组件 -->
		<shopro-share v-model="showShare"
			posterType="user"></shopro-share>
		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
	</view>
</template>
<script>
	import shBanner from './components/sh-banner.vue';
	import shGridSwiper from './components/sh-grid-swiper.vue';
	import shAdv from './components/sh-adv.vue';
	import shRichtext from './components/sh-richtext.vue';
	import shCell from './components/sh-cell.vue';
	import shGrid from './components/sh-grid.vue';
	import shOrderCard from './components/sh-order-card.vue';
	import shWallet from './components/sh-wallet.vue';
	import shHotGoods from './components/sh-hot-goods.vue';
	import userinfoCard from './user/userinfo-card.vue';
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import share from '@/shopro/share';
	export default {
		components: {
			shBanner,
			shGridSwiper,
			shAdv,
			shRichtext,
			shCell,
			shGrid,
			shWallet,
			shOrderCard,
			shHotGoods,
			userinfoCard
		},
		data() {
			return {
				scrollTop: 0,
				showShare: false,
				enable: false, //是否开启吸顶。
				menuList: [{
					text: "我的订单",
					icon: "/static/images/menu-1.png",
					url: "/pages/order/list",
					agent: false
				}, {
					text: "我的团队",
					icon: "/static/images/menu-2.png",
					url: "/pages/app/commission/team",
					agent: true
				}, {
					text: "团队订单",
					icon: "/static/images/menu-3.png",
					url: "/pages/app/commission/order",
					agent: true
				}, {
					text: "提成机制",
					icon: "/static/images/menu-4.png",
					url: "/pages/public/faq",
					agent: false
				}, {
					text: "资料库",
					icon: "/static/images/menu-5.png",
					url: "/pages/index/information/list",
					agent: false
				}, {
					text: "激励活动",
					icon: "/static/images/menu-6.png",
					url: "/pages/index/actuate/list",
					agent: false
				}, {
					text: "排行榜",
					icon: "/static/images/menu-7.png",
					url: "/pages/app/commission/rankings",
					agent: false
				}],
			};
		},
		computed: {
			...mapGetters(['initShop', 'userTemplate', 'isLogin', 'userInfo', 'authType', 'agentInfo']),
			userHeadData() {
				if (this.userTemplate?.length) {
					return this.userTemplate[0].content;
				}
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShow() {
			if (this.isLogin) {
				this.init();
				this.getUserData();
			}
			this.enable = true;
		},
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'getUserData', 'getAgent']),
			goAgent(url, agent = true) {
				if (agent && (!this.agentInfo || this.agentInfo.status != 'normal' || this.agentInfo.info_status != 1)) {
					this.$Router.push("/pages/app/commission/apply")
					return false
				}
				if (url == 'share') {
					if (!this.agentInfo.level_list.length) {
						uni.showToast({
							icon: "none",
							title: "您目前等级，没有邀请权限"
						});
						return false
					}
					this.showShare = true
				} else {
					this.$Router.push(url)
				}
			},
			onShare() {
				this.showShare = true;
				uni.hideTabBar();
			},
			// 初始化
			init() {
				this.getUserInfo().then(res => {
					uni.stopPullDownRefresh();
					this.getAgent()
				}).catch(e => {
					uni.stopPullDownRefresh();
				});
			}
		}
	};
</script>
<style lang="scss">
	.level-tag {
		margin-left: 18rpx;
		background: #feb333;
		display: inline-block;
		color: #fff;
		padding: 4rpx 20rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		transform: scale(.8);
		transform-origin: left center;
	}

	.section {
		margin: 30rpx 30rpx 0;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx 30rpx 30rpx;

		.tit {
			font-size: 32rpx;
			font-weight: 900;
		}

		.share {
			background-image: linear-gradient(to right, #f5ecda, #fbf8f2);
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			margin-top: 30rpx;
			color: #c58a66;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: 900;

			.icon {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.menu {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.item {
				width: 25%;
				min-width: 25%;
				max-width: 25%;
				text-align: center;
				margin: 30rpx 0;

				.icon {
					width: 60rpx;
					height: 60rpx;
				}

				.name {
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}
		}
	}

	.income-section {
		margin: 30rpx 30rpx 0;
		background: #fff;
		border-radius: 20rpx;
		padding: 50rpx 0 30rpx;

		.list {
			display: flex;
			align-items: center;
			justify-content: space-around;
			text-align: center;

			.item {
				flex: 1;
				border-left: 1px solid #f3f3f3;
			}

			.item:first-child {
				border-left: 0;
			}

			.num {
				font-weight: 900;
				font-size: 32rpx
			}

			.label {
				margin-top: 16rpx;
				font-size: 26rpx;
			}
		}

		.tip {
			padding: 50rpx 30rpx 0;
			font-size: 26rpx;
			color: #969696;
		}
	}

	.total-income {
		background-image: linear-gradient(to right, #f5ddd1, #f4d1b2);
		padding: 40rpx 30rpx;
		margin: 50rpx 30rpx 0;
		border-radius: 20rpx;
		color: #b66b26;
		font-weight: 900;
		font-size: 28rpx;

		.income {
			view {
				display: inline-block;
			}
		}

		.money {
			font-size: 40rpx;
			margin-left: 10rpx;
		}

		.btn {
			background: #fff;
			color: #bc9f77;
			padding: 8rpx 20rpx;
			border-radius: 400rpx;
			font-size: 28rpx;
		}
	}

	.user-head {
		width: 100%;
		padding-top: 50rpx;

		.info-box {
			padding-left: 30rpx;

			.head-img-wrap {
				position: relative;
			}

			.head-img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background: #ccc;
				margin-right: 25rpx;
				overflow: hidden;
			}

			.user-name {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
				line-height: 30rpx;
			}
		}
	}

	.copyright-box {
		.copyright-text {
			font-size: 22rpx;
			font-weight: 500;
			color: #c4c4c4;
		}
	}
</style>